<template>
  <div class="task">
    <h2><slot></slot></h2>
    <ul>
        <li v-for="(item, index) in tasks" 
        v-show="item.check === isfinish" 
        :key="item.id">
            <div>
                <input type="checkbox" v-model="item.check">
                <div @dblclick="exit(index)">
                    <span v-if="!item.isExit">{{item.content}}</span>
                    <input class="exitIpt" ref="exit" v-else type="text" @blur="closeExit(index)" v-model="item.content">
                </div>
            </div>
            <button @click="delTask(index)">-</button>
        </li>
    </ul>
 </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
    name: 'task',
    props: {
        isfinish: {
            type: Boolean
        }
    },
    // mapState和mapGetters都是使用在computed中的
    computed: {
        ...mapState(['tasks'])
    },
    // mapMutations和mapActions 是函数方法 所有是放在methods中的 
    methods:{
        ...mapMutations(['delTask', 'closeExit']),
        // 删除任务的逻辑
        // del(i) {
        //     this.$store.commit('delTask', i)
        // },
        // 编辑的逻辑
        exit(i) {
            this.$store.commit('changeExit', i)
            this.$nextTick(() => { // 下一次dom跟新过着打补丁完成后立即出发的函数
                // console.log(this.$refs.exit);
                this.$refs.exit.focus()
            })
        }
        // blur(i) {
        //     // console.log(1);
        //     this.$store.commit('closeExit', i)
        // }
    },
 }
</script>

<style scoped lang="scss">
.task {
    width: 600px;
    margin: 0 auto;
}
h2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
li {
    display: flex;
    height: 30px;
    margin-bottom: 20px;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    border-left: 5px solid #629A9C;
    background-color: #fff;
    div {
        display: flex;
        padding-left: 10px;
        height: 100%;
        align-items: center;
        input {
            width: 20px;
            height: 20px;
        }
        
    }
    button {
        display: inline-block;
        width: 27px;
        height: 25px;
        border-radius: 14px;
        border: 6px double #FFF;
        background: #CCC;
        line-height: 12px;
        text-align: center;
        color: #FFF;
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
    }
    .exitIpt {
        min-width: 200px;
    }
}
</style>